<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/hotellie.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/bootstrap.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/font-awesome.css"/>
		<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'/>
    </h:head>
    
    <h:body>
            <f:view renderKitId="PRIMEFACES_MOBILE" />
            
             <style>
      		      .dateHms {
    				font-size: 12px;
    				margin-top: 0em;
				  }
				  
				  .ui-block-a {
                   clear: left;
				   margin-top: 10px;
				  }		
				  .ui-btn{
				    font-size: 12px;
				    padding:.7em 1.5em;
				  }
				  
				   .ui-block-c {
                   clear: left;
				   margin-top: -10px;
				  }	
            </style>
        
        <pm:page id="first">
            <pm:header title="All about you" theme="b" styleClass="hmsHeader">
            	<p:button href="/search/search.xhtml"  value="Back" styleClass="ui-btn-left ui-btn-inline"/>
            </pm:header>
            
            <pm:content>
                <h:form id="main" styleClass="dateHms">
                     <p:panelGrid columns="2" styleClass="usrNameTbl">
                          <p:inputText id="firstN" value="#{userView.user.firstName}" placeholder="First Name"  />
                          <p:inputText id="lastN" value="#{userView.user.lastName}" placeholder="Last Name"/>
                     </p:panelGrid>
                     
                    <p:panel header="Personal Details">
                         <p:panelGrid columns="2">
                              <h:outputText value="Email Address" />
   							  <h:outputText id="basic1aa" value="#{userView.user.emailAddress}"/>
                              <h:outputText value="Mobile Phone" />
                              <p:inputText id="basic" value="#{userView.user.mobilephone}"/>
                              
                              <h:outputText value="Date of birth" />
                              <p:calendar id="basic7" value="#{userView.user.dob}" pattern="MM/dd/yyyy"/>
                              <h:outputText value="Gender" />
							  <p:selectOneMenu id="selectOneMenu" styleClass="combobox" value="#{userView.user.gender}">
								        <f:selectItem itemLabel="Male" itemValue="MALE" />
								        <f:selectItem itemLabel="Female" itemValue="FEMALE" />
								        <f:selectItem itemLabel="Rather not say" itemValue="RATHER_NOT_SAY" />
							  </p:selectOneMenu>         
		                </p:panelGrid>
                     </p:panel>
                     <p:panel header="Other Details">
                         <p:panelGrid columns="2">
                              <h:outputText value="Country" />
   							  <p:inputText id="country" value="#{userView.user.country}"/>
                              <h:outputText value="Address" />
                              <p:inputText id="add1" value="#{userView.user.address}"/>
                              <p:inputText id="basic344" placeholder="Post Code" style="margin-top:-4px" value="#{userView.user.postcode}"/>
                              <p:inputText id="basic43" placeholder="City" value="#{userView.user.city}"/>
		                </p:panelGrid>
                     </p:panel>
                     <p:panel header="Payment Details">
                          <p:link  value="Add card" />
                     </p:panel>
                     <p:commandButton value="submit"  styleClass="btn btn-primary" actionListener="#{userView.updateUser}">  </p:commandButton>
                     
                </h:form>
                
            </pm:content>
        </pm:page>

    </h:body>
    
</html>